import Vue from 'vue'
import dayjs from "dayjs";
import Color from 'color';

/**
 * @param {array} titles 标题
 * @param {function} getData 读取数据项的函数
 * @param {array} colors echarts配置用到的颜色，以防后期有更换主题色的需求
 * @returns 返回一个数据数据生成echarts配置项的函数
 */
const lineChartOption = (titles, getData, colors) => {
    /**
     * 
     * @param {object} data 数据项
     * @returns 返回一个echarts的配置项
     */
    return (datas) => {

        const timeZoomData = datas.map(item => dayjs(item.now).format('HH:mm:ss')) // 获取时间轴数据
    
        const data = getData.map(item => datas.map(item)) // 获取展示数据
    
        return {
            grid: {
                top: 120,
                left: 50,
                bottom: 80,
                right: 50,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                    label: {
                        backgroundColor: "#283b56",
                    },
                },
            },
            legend: {
                data: titles,
                top: 50,
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    data: timeZoomData,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true
                    }
                },
            ],
            yAxis: [
                {
                    type: "value",
                    scale: true,
                    name: "",
                    max: 100,
                    min: 0,
                    splitNumber: 6,
                    boundaryGap: [0.2, 0.2],
                    axisLine: {
                        show: true
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
            ],
            series: titles.map((item, index) => ({
                name: item,
                type: "line",
                smooth: true, //是否平滑曲线显示
                symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                lineStyle: {
                    normal: {
                        label: {
                            show: true
                        },
                        color: Color(colors[index]).hsl().string(),
                        borderColor: Color(colors[index]).alpha(0.2).hsl().string(),
                        borderWidth: 12,
                    },
                },
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new Vue.prototype.$echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                            { offset: 0, color: Color(colors[index]).alpha(0.2).hsl().string() },
                            { offset: 1, color: Color(colors[index]).alpha(0).hsl().string() },
                            ],
                            false
                        ),
                
                        shadowColor: "rgba(0, 0, 0, 0.1)", //阴影颜色
                        shadowBlur: 10, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    },
                },
                data: data[index], // 展示数据
            })),
        }
    }
}

export default lineChartOption;